<script setup lang="ts">
import {StrUtil} from '@xtail/core'
import ArrowsDiagonal from '@iconify-icons/tabler/arrows-diagonal'
import ArrowsDiagonalMinimize2 from '@iconify-icons/tabler/arrows-diagonal-minimize-2'
import {XCollapseBtn} from '../XCollapseBtn'
import type {ExpandBtnPropsType} from './types'
import {ref} from 'vue';

defineOptions({
  name: 'XExpandBtn',
})

const props = withDefaults(defineProps<ExpandBtnPropsType>(), {
  iconProps: {} as any,
  text: ['展开', '收起'] as any,
  btnProps: {} as any,
  click: () => {
  },
  collapse: false,
  disabled: false,
  tooltipProps: {} as any,
  expand: () => {
  },
  retract: () => {
  }
})

const slots = useSlots()

const isExpand = ref(false)
const handleClick = (evt: MouseEvent) => {
  isExpand.value = !isExpand.value
  if (isExpand.value) {
    props.expand()
  } else {
    props.retract()
  }
  props.click(evt)
}
</script>

<template>
  <XCollapseBtn
    :icon-props="{
      iconProps: {
        icon: isExpand ? ArrowsDiagonal : ArrowsDiagonalMinimize2
      },
      ...iconProps
    }"
    :text="StrUtil.isStr(text) ? text : (isExpand ? text[0] : text[1])"
    :btn-props="{
      dashed: !isExpand,
      ...btnProps,
    }"
    :click="handleClick"
    :collapse="collapse"
    :disabled="disabled"
    :tooltip-props="tooltipProps"
  >
    <template v-if="slots['btn-icon']" #btn-icon>
      <slot name="btn-icon"/>
    </template>
  </XCollapseBtn>
</template>

<style scoped lang="scss">

</style>
